<template>
    <div class="app-container">
        <el-tabs v-model="activeName"  style="margin-left:10px">
            <el-tab-pane label="新功能开放通知" name="one">
                <el-form ref="form" 
                :rules="rules"
                :model="form" 
                label-width="100px" 
                style="width: 600px; margin-top: 20px;">
                    <el-form-item label="配置名称" >
                        <el-input v-model="form.title" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="模板ID" >
                        <el-input v-model="form.onlyKey" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="标题内容" prop="info.thing3">
                        <el-input v-model="form.info.thing3"></el-input>
                    </el-form-item>
                    <el-form-item label="新功能介绍" prop="info.thing2">
                        <el-input type="textarea" v-model="form.info.thing2"></el-input>
                    </el-form-item>
                    <el-form-item label="详细说明" prop="info.thing4">
                        <el-input type="textarea" v-model="form.info.thing4"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit('form')">保存</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="主题作品上新提醒" name="second">
                <el-form ref="form2" 
                :rules="rules2"
                :model="form2" 
                label-width="100px" 
                style="width: 600px; margin-top: 20px;">
                    <el-form-item label="配置名称" >
                        <el-input v-model="form2.title" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="模板ID" >
                        <el-input v-model="form2.onlyKey" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="主题名称" prop="info.thing1">
                        <el-input v-model="form2.info.thing1"></el-input>
                    </el-form-item>
                    <el-form-item label="主题作品" prop="info.thing3">
                        <el-input type="textarea" v-model="form2.info.thing3"></el-input>
                    </el-form-item>
                    <el-form-item label="温馨提示" prop="info.thing4">
                        <el-input type="textarea" v-model="form2.info.thing4"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit2('form')">保存</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="新的未读消息通知" name="third">
                <el-form ref="form3" 
                :rules="rules3"
                :model="form3" 
                label-width="100px" 
                style="width: 600px; margin-top: 20px;">
                    <el-form-item label="配置名称" >
                        <el-input v-model="form3.title" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="模板ID" >
                        <el-input v-model="form3.onlyKey" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="消息标题" prop="info.thing4">
                        <el-input v-model="form3.info.thing4"></el-input>
                    </el-form-item>
                    <el-form-item label="消息发送者" prop="info.thing1">
                        <el-input type="textarea" v-model="form3.info.thing1"></el-input>
                    </el-form-item>
                    <el-form-item label="消息内容" prop="info.thing2">
                        <el-input type="textarea" v-model="form3.info.thing2"></el-input>
                    </el-form-item>
                    <el-form-item label="消息备注" prop="info.thing6">
                        <el-input type="textarea" v-model="form3.info.thing6"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit3('form')">保存</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>

    </div>
</template>
  
  <script>
  import { getConfig ,editConfig} from '@/api/config'
  import { WxapiSend } from '@/api/send'
  import { parseTime } from '@/utils'
  import waves from '@/directive/waves' // waves directive
  export default {
      name: 'Config',
      directives: { waves },
      data() {
          return {
              activeName: 'one',
              form: {
                  title: '新功能开放通知',
                  onlyKey: 'lzKn7VikFKa6Onv-8Yyhw1j3aWcNSnGbSfn0KrKjg_s',
                  info: {
                      thing3: '',
                      thing2: '',
                      thing4: '',
                  }
              },
              form2: {
                  title: '主题作品上新提醒',
                  onlyKey: 'KE3KEqJr8homU9Zr3C-aUCB2_7IpStOps_zrBrlDfb0',
                  info: {
                      thing3: '',
                      thing1: '',
                      thing4: '',
                  }
              },
              form3: {
                  title: '新的未读消息通知',
                  onlyKey: 'KfncaHyF0YkzHlSmuDy1uqEb_VFtAT37Yk6J9-kn2Ac',
                  info: {
                      thing2: '',
                      thing1: '',
                      thing4: '',
                      thing6: '',
                  }
              },
              rules: {
                  'info.thing3': [{ required: true, message: '标题内容不能为空', trigger: 'blur' },
                  { max: 20, message: '不能超过20个文字a', trigger: 'blur' }],
                  'info.thing2': [{ required: true, message: '新功能介绍不能为空', trigger: 'blur' },
                  { max: 20, message: '不能超过20个文字b', trigger: 'blur' }],
                  'info.thing4': [{ required: true, message: '详细说明不能为空', trigger: 'blur' },
                  { max: 20, message: '不能超过20个文字c', trigger: 'blur' }],
              },
              rules2: {
                  'info.thing3': [{ required: true, message: '主题作品不能为空', trigger: 'blur' },
                  { max: 20, message: '不能超过20个文字a', trigger: 'blur' }],
                  'info.thing1': [{ required: true, message: '主题名称不能为空', trigger: 'blur' },
                  { max: 20, message: '不能超过20个文字b', trigger: 'blur' }],
                  'info.thing4': [{ required: true, message: '温馨提示不能为空', trigger: 'blur' },
                  { max: 20, message: '不能超过20个文字c', trigger: 'blur' }],
              },
              rules3: {
                  'info.thing2': [{ required: true, message: '消息内容不能为空', trigger: 'blur' },
                  { max: 20, message: '不能超过20个文字a', trigger: 'blur' }],
                  'info.thing1': [{ required: true, message: '消息发送者不能为空', trigger: 'blur' },
                  { max: 20, message: '不能超过20个文字b', trigger: 'blur' }],
                  'info.thing4': [{ required: true, message: '消息标题不能为空', trigger: 'blur' },
                  { max: 20, message: '不能超过20个文字c', trigger: 'blur' }],
                  'info.thing6': [{ required: true, message: '消息备注不能为空', trigger: 'blur' },
                  { max: 20, message: '不能超过20个文字c', trigger: 'blur' }],
              },
          }
    },
      created() {
          this.getList()
      },
      methods: {
          getList() {
              getConfig({onlyKey:this.form.onlyKey}).then(response => {
                  this.form = response.data
              }).catch(err=>{
                console.log(err)
              })
              getConfig({onlyKey:this.form2.onlyKey}).then(response => {
                  this.form2 = response.data
               }).catch(err=>{
                console.log(err)
              })
              getConfig({onlyKey:this.form3.onlyKey}).then(response => {
                  this.form3 = response.data
              }).catch(err=>{
                console.log(err)
              })
          },
          onSubmit(form) {
              this.$refs['form'].validate((valid) => {
                  if (valid) {
                    editConfig(this.form).then(response => {
                              this.$notify({
                                  title: '操作成功',
                                  message: response.msg,
                                  type: 'success',
                                  duration: 2000
                              })
                      }).catch(err=>{
                        console.log(err)
                      })
                  }
              })
          },
          onSubmit2() {
              this.$refs['form2'].validate((valid) => {
                  if (valid) {
                    editConfig(this.form2).then(response => {
                              this.$notify({
                                  title: '操作成功',
                                  message: response.msg,
                                  type: 'success',
                                  duration: 2000
                              })
                      }).catch(err=>{
                        console.log(err)
                      })
                  }
              })
          },
          onSubmit3() {
              this.$refs['form3'].validate((valid) => {
                  if (valid) {
                    editConfig(this.form3).then(response => {
                              this.$notify({
                                  title: '操作成功',
                                  message: response.msg,
                                  type: 'success',
                                  duration: 2000
                              })
                      }).catch(err=>{
                        console.log(err)
                      })
                  }
              })
          }
      }
  }
  </script>
  